<template>
  <div class="mycomponents">
    <div class="rendering">
      <a
        class="home_main"
        v-for="item in myNewsbottomBefore"
        :key="item.id"
        @click="gotoNewspaperFn(item.id)"
      >
        <div class="home_main_box">
          <div class="home_main_box_left">
            <div class="home_main_box_left_pbox">
              <p>
                {{ item.title }}
              </p>
            </div>
            <div class="home_main_box_left_pbox">
              <p>{{ item.hint }}</p>
            </div>
          </div>
          <div class="home_main_box_right">
            <img :src="item.images" />
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home_main {
  width: 100%;
  height: 90px;
  display: flex;
  margin: 15px 0;
  // background: aqua;
  justify-content: center;
  align-items: center;

  .home_main_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;

    .home_main_box_left {
      flex: 1;
      font-size: 18px;
      font-weight: 700;

      .home_main_box_left_pbox {
        &:nth-child(1) {
          p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; /* 第二行开始出现省略号 */
          }
        }

        &:nth-child(2) {
          margin-top: 15px;

          p {
            font-size: 12px;
          }
        }
      }
    }

    .home_main_box_right {
      img {
        width: 75px;
        padding: 0 0 0 15px;
        vertical-align: bottom;
      }
    }
  }
}
</style>

<script>
import { storiesBeforeDate } from "../api/index";

export default {
  name: "MystoryComponent",
  props: {
    mydate: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      myNewsbottomBefore: [],
    };
  },
  methods: {
    async storiesBeforeDateFn(mydate) {
      try {
        const content = await storiesBeforeDate({}, mydate);
        let { stories } = content;
        let arrMain = stories.map((item) => {
          let obj = {};
          obj.hint = item.hint;
          obj.id = item.id;
          obj.images = item.images[0];
          obj.title = item.title;
          obj.url = item.url;
          return obj;
        });
        this.myNewsbottomBefore = arrMain;
      } catch (error) {
        console.error("获取历史新闻失败:", error);
      }
    },
    gotoNewspaperFn(id) {
      this.$router
        .push({ path: "/newspaper", query: { id: id } })
        .catch(() => {});
    },
  },
  watch: {
    mydate(v) {
      this.storiesBeforeDateFn(v);
    },
  },
};
</script>

